<style>
    .left{
        width: 15%;
        height: 800px;
        float: left;
        margin-left: 30px;
    }
    .left ul{
        font-size: 12px;
    }
    .left li{
        margin-top: 15px;
    }
    .left h5{
        margin: 5px;
        font-weight: bold ;
    }
    .r{
        width: 2px;
        height: 566px;
        margin-left: 20px;
        background: #1d2124;
        opacity:0.4;
        float: left;
    }

    #search_bar{
        width: 450px;
        height: 45px;
        float: left;
        border-radius:10px 0px 0px 10px;
        border: #405ba8 2px solid;
    }
    .search_b{
        margin-left: 0px;
        width: 100px;
        height: 45px;
        float: left;
        font-size: 20px;
        font-weight: bold;
        background-color:#405ba8;
        border: none;
        border-radius:0px 10px 10px 0px;
    }
    .search{
        width: 1000px;
        height: 60px;
        margin-left: 450px;
        margin-bottom: 10px;
        margin-top: 20px;
        vertical-align: center;
    }
    .page{
        margin-bottom: 10px;
        vertical-align: center;
        float: right;

    }
    .page button{
        margin-right: 10px;
        float: right;
    }
    .page input{
        float: right;
        width: 40px;
        margin-right: 10px;
    }
    .page p{
        float: right;
        margin-right: 10px;
        font-size: 20px;
    }
    .btn-info{
        margin: 20px;
    }
    .form-check{
        margin: 10px;
        font-size: 15px;
    }
    .form-check :hover{
        cursor: pointer;
    }
    .list{
        padding:0px;
    }
</style>

<div  class="search">
    <form role="form" action="">
        {% csrf_token %}
        <input type="text" id = "search_bar" class="form-control" placeholder="搜索内容" name = "search_info" value="{{ da }}"> <input class="search_b" type="submit" value="搜索">
        <form method="post">
            {% csrf_token %}
            <div class="page">
                <input type="text" class="form-control" placeholder="1" name = "page" >
                <button type="submit" class="btn btn-outline-info" >转到</button>
            </div>
        </form>
    </form>
</div>

{% if messages %}
    <script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
    </script>
{% endif %}

<div class="left">
    <form method="post">
    {% csrf_token %}
        <h5>筛选项（书籍种类）</h5>
        <ul class = "list">
            {% for i,j in cata %}
                 <div class="form-check">
                    <label class="form-check-label">
                    <input type="checkbox" {{ j }}   name = "{{ i }}" value="{{ forloop.counter}}"><span> </span>{{ i }}
                    </label>
                 </div>
            {% endfor %}
        </ul>
        <button type="submit" class="btn btn-info">筛选</button><button type="reset" class="btn btn-info">重置</button>
    </form>
</div>
<div class="r"></div>
